
/**
 * 第一步
 */
class Counter extends React.Component{//要渲染的组件
    constructor(props){
      super(props);
      console.log(this.props)
      this.state={
        meg:"213"
      }
    };
    render(){
      const value = this.props.value;//绑定在props上面的数据
      const onAddClick = this.props.onAddClick;//绑定在props上面的方法
      const onAddClick5 = this.props.onAddClick5;//绑定在props上面的方法
      return(
        <div>
          <h1>计数器：{value}</h1>
          <button onClick={onAddClick}>点击+1</button>
          <button onClick={onAddClick5}>点击+5</button>
        </div>
      )
    }
  }
  //创建一个修改数据方法的对象
  let ActionFnObj = {
    add:function(state,action){
      state.num++
      return state
    },
    addNum:function(state,action){
      console.log(state);
      console.log(action)
      state.num = state.num + action.num
      return state
    }
  }
  
  /**
   * 第二部
   */
  const store = createStore(reduce);//创建一个数据仓库
  
  
  
  //传进去的reduce是一个方法
  function reduce(state={num:0},action){
    console.log(state)
    console.log(ActionFnObj)
    console.log(action.type)
    if(action.type.indexOf('redux') === -1){
      state = ActionFnObj[action.type](state,action)
  
      return {...state}
    }
    else{
      return state
    }
  }
  
  /**
   * 
   * 第三步
   */
  
  //将要修改的数据映射到props函数
  function mapStateToProps(state){
    return{
      value:state.num
    }
  }
  const addAction = {//要修改数据的状态
    type:'add'
  }
  
  //将要修改的数据的状态，映射到要修改的props方法
  function mapDispatchToProps(dispatch){
    return{
      onAddClick:()=>{
        dispatch(addAction)
        
      },
      onAddClick5:()=>{
        dispatch({type:"addNum",num:5})
      }
    }
  }
  
  /**
   * 第四步，将上面的这两个方法，
   * 将数据仓库的state和修改state的方法映射到组件上，形成新的组件
   */
  //connect用于绑定刚才创建的映射关系
  const App = connect(
    mapStateToProps,
    mapDispatchToProps
  )(Counter)
  
  //Provide是将数据仓库的store传进去，并进行刷新
  ReactDOM.render(
      <Provider store={store}>
        <App></App>
      </Provider>
        ,
    document.getElementById('root')
  );
  